<template>
  <div class="book_page">
    <el-scrollbar class="el_scroll">
      <el-table class="el_table" :data="appointmentList" size="mini">
        <el-table-column label="预约医院" prop="hospitalName"></el-table-column>
        <el-table-column label="预约时间" prop="appointmentTime" width="140"></el-table-column>
        <el-table-column label="预约备注" prop="remark">
          <template slot-scope="{row}">
            <el-tooltip class="item" effect="dark" placement="top-start">
              <div slot="content" style="max-width:240px">{{row.remark}}</div>
              <div class="tab_txt">{{row.remark}}</div>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column label="预约状态" prop="statusDesc" width="140">
          <template slot-scope="{row}">
            <el-tooltip class="item" effect="dark" placement="top-start" v-if="(row.status == 7 || row.status == 6) && row.reason">
              <div slot="content" style="max-width:240px">{{row.reason}}</div>
              <div>{{row.statusDesc}} <i class="el-icon-warning-outline"></i></div>
            </el-tooltip>
            <span v-else>{{row.statusDesc}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="outpatientFeedback" label="门诊反馈">
          <template slot-scope="{row}">
            <el-tooltip class="item" effect="dark" placement="top-start">
              <div slot="content" style="max-width:240px">{{row.outpatientFeedback}}</div>
              <div class="tab_txt">{{row.outpatientFeedback}}</div>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column label="是否回访" prop="rvCnt" width="100">
          <template slot-scope="{row}">{{row.rvCnt>0?'是':'否'}}</template>
        </el-table-column>
        <el-table-column label="创建时间" prop="createdDate" width="140"></el-table-column>
      </el-table>
    </el-scrollbar>
  </div>
</template>
<script>
export default {
  name: "BookInfo",
  props: {
    userInfo: {
      type: Object,
      default: function () {
        return {};
      },
    },
  },
  watch: {
    userInfo: {
      handler: function (e) {
        console.log(e);
        if (e.appointmentList) {
          this.appointmentList = e.appointmentList;
        }
      },
      immediate: true,
    },
  },
  data() {
    return {
      appointmentList: [],
    };
  },
  mounted() {},
  methods: {},
};
</script>
<style lang="scss">
.el_scroll {
  .el-scrollbar__wrap {
    max-height: 60vh;
    overflow-x: hidden;
  }
}
</style>
<style lang="scss" scoped>
.book_page {
  min-height: 360px;
}
.tab_txt {
  display: -webkit-box;
  /**对象作为伸缩盒子模型展示**/
  -webkit-box-orient: vertical;
  /**设置或检索伸缩盒子对象的子元素的排列方式**/
  -webkit-line-clamp: 3;
  /**显示的行数**/
  overflow: hidden;
  /**隐藏超出的内容**/
}
</style>